<template>
    <div class="main-1">
        <div class="tab">
            <div class="tab-left">
                <div class="meu-demo-left">
                    <el-menu class="el-menu-demo" mode="horizontal">
                        <el-menu-item index="1">销售额</el-menu-item>
                        <el-menu-item index="2"><a target="_blank">访问量</a></el-menu-item>
                    </el-menu>
                </div>
                <div class="meu-demo-right">
                    <el-menu class="el-menu-demo" mode="horizontal">
                        <el-menu-item index="1">今日</el-menu-item>
                        <el-menu-item index="2"><a>本周</a></el-menu-item>
                        <el-menu-item index="3">本月</el-menu-item>
                        <el-menu-item index="4"><a>全年</a></el-menu-item>
                    </el-menu>
                </div>
            </div>
            <div class="tab-right">
                <el-date-picker
                        type="daterange"
                        range-separator="~"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
                </el-date-picker>
            </div>
        </div>
        <div class="content-1">
            <div class="content-left" id="trand"></div>
            <div class="content-right">
                <p>门店销售额排名</p>
                <div class="text-left">
                    <p>1</p>
                    <p>2</p>
                    <p>3</p>
                    <p>4</p>
                    <p>5</p>
                    <p>6</p>
                    <p>7</p>
                </div>
                <div class="text-conter">
                    <p>工专路一号店</p>
                    <p>工专路二号店</p>
                    <p>工专路三号店</p>
                    <p>工专路四号店</p>
                    <p>工专路五号店</p>
                    <p>工专路六号店</p>
                    <p>工专路七号店</p>
                </div>
                <div class="text-right">
                    <p>323,234</p>
                    <p>323,234</p>
                    <p>323,234</p>
                    <p>323,234</p>
                    <p>323,234</p>
                    <p>323,234</p>
                    <p>323,234</p>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {getSalesRanking} from "../../api/sales_ranking_api";

    export default {
        name: "index",
        data() {
            return {
                data2: []
            }
        },
        created() {
        },

        methods: {
            salesRanking() {
                getSalesRanking().then(res => {
                    let data1 = res.data;
                    this.data2 = data1.data;
                    // for (let i = 0; i < data2.length; i++) {
                    //
                    // }
                }).catch(err => {
                    console.error("销售排名::", err)
                })
            },


            salesTrend() {

                var chartDom = document.getElementById('trand');
                var myChart = this.$echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '销售额趋势'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            min: 0,
                            max: 1200,
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '数据',
                            type: 'bar',
                            barWidth: '60%',
                            color: '#3c90f7',
                            data: [1115, 900, 1128, 1088, 390, 1130, 820, 390, 1130, 820, 654, 356]
                        }
                    ]
                };

                option && myChart.setOption(option);

            }

        },

        mounted() {
            this.salesRanking()
            this.salesTrend()
        }

    }
</script>

<style scoped>
    .main-1 {
        background: #ffffff;
        height: 450px;
        margin: 25px;
    }

    .tab {
        position: relative;
        border-bottom: 1px solid #d3d3d3;
        width: 100%;
        height: 60px;

    }

    .tab .tab-left {
        display: flex;
        justify-content: space-between;
        width: 72%;
        height: 60px;
        border-right: 1px solid #d3d3d3;
    }

    .meu-demo-left {
        border-right: 1px solid #d3d3d3;
    }

    .tab .tab-right {
        position: absolute;
        top: 0;
        right: 0;
        width: 28%;
        height: 60px;
        padding-top: 10px;
    }

    .content-1 {
        display: flex;
        height: 82%;
        padding: 20px 0 0 15px;
    }

    .content-left {
        width: 70%;
        height: 100%;
    }

    .content-right {
        width: 30%;
        height: 100%;
        padding-left: 30px;
        text-align: left;
    }

    .content-right .text-left {
        position: absolute;
        width: 50px;
        /*height: 100%;*/
    }

    .text-left p {
        width: 15px;
        height: 15px;
        padding: 5px;
        text-align: center;
        background: #e5e5e5;
        color: #000000;
        border-radius: 50%;
    }

    .text-left p:nth-child(-n+3) {
        background: #0c0d0e;
        color: #ffffff;
        border-radius: 50%;
    }

    .text-conter {
        position: absolute;
        width: 100px;
        height: 55%;
        padding: 1px 0 0 50px;
    }

    .text-conter p {
        padding-bottom: 4px;
    }

    .text-right {
        width: 100px;
        height: 80%;
        padding: 1px 0 0 300px;
    }

    .text-right p {
        padding-bottom: 8px;
    }
</style>
